<!--
* description: 维修结算申请
* author:沈赛
* createdDate:2021-2-24
* 最后联调完成人： wangml
-->
<template>
  <section class="editBigAreaInfo">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 客户费用信息 -->
      <el-tab-pane label="费用信息" name="first">
        <QueryComponent
          ref="q1-1"
          :dynamic-inputs="formInputs1"
          title="客户费用信息"
          :form-field="formField_one"
          width="98%"
        >
          <template v-slot:other>
            <el-button
              style="float: right"
              type="primary"
              class="iconfont icon-applicationForm"
              @click="SettlementApp"
            >结算确认</el-button>
          </template>
        </QueryComponent>
        <el-divider />
        <!-- 其他费用信息 -->
        <QueryComponent
          ref="q1-2"
          :dynamic-inputs="formInputs2"
          title="其他费用信息"
          :form-field="formField_two"
        />
        <el-divider />
        <!-- 结算信息 -->
        <div class="filter-container filter-title">结算信息</div>
        <one-table-template
          ref="q1-3"
          :dynamic-table-cols="dynamicTables"
          :is-show-pagination="false"
          :dynamic-table-defult-height="300"
        >
          <template #dueAmount="scope">
            <el-input
              v-model="scope.row['dueAmount']"
              placeholder="请输入"
              clearable
              :disabled="isDisabled(scope.row)"
              @change="priceChange($event, scope.row, scope.col)"
            />
          </template>
        </one-table-template>
      </el-tab-pane>
      <el-tab-pane label="维修信息" name="three">
        <!-- 车辆信息 -->
        <QueryComponent
          :dynamic-inputs="formInputs_1"
          title="车辆信息"
          :form-field="formField_custCarInfo"
        />
        <!-- 维修项目 表格一 -->
        <div class="mainten-table__line">
          <span class="mainten-table__line-info">维修项目</span>
        </div>
        <OneTableTemplate
          ref="table_3_1"
          :dynamic-table-cols="tableHeader_3_1"
          :is-show-pagination="false"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :dynamic-form-fields="formField_info1"
        />
        <!-- 维修信息 表格二 -->
        <div class="mainten-table__line">
          <span class="mainten-table__line-info">维修备件</span>
        </div>
        <OneTableTemplate
          ref="table_3_2"
          :dynamic-table-cols="tableHeader_3_2"
          :is-show-pagination="false"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :dynamic-form-fields="formField_info2"
        />
        <!-- 维修信息 表格三 -->
        <div class="mainten-table__line">
          <span class="mainten-table__line-info">其他项目</span>
        </div>

        <OneTableTemplate
          ref="table_3_3"
          :dynamic-table-cols="tableHeader_3_3"
          :is-show-pagination="false"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :dynamic-form-fields="formField_info3"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- </el-dialog> -->
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import fetch from './fetchData'
import QueryComponent from '@/components/QueryComponent/QueryComponent'

export default {
  name: 'MaintenanceSettledit',
  components: {
    OneTableTemplate,
    QueryComponent
  },

  // 组件混入对象
  mixins: [formMixins, oneTableWithViewTemplateMixins],

  props: {
  },

  data() {
    const viewPageCode = 'bigAreaInfo-edit'
    return {
      formField_info1: {},
      formField_info2: {},
      formField_info3: {},
      formField_custCarInfo: {},
      row: { },
      formField_one: { 'wiDueAmount': '', 'partDueFee': '',
        'sumOtherDueAmount': '', 'repairDueAmount': '', 'wiDiscountRate': '',
        'wiRealAmount': '', 'partDiscountRate': '',
        'partRealFee': '', 'produceDate': '',
        'repairRealAmount': '', 'remark': '' },
      formField_two: {
        claimDemage: '',
        inside: '',
        insurance: ''
      },
      titleName: '维修结算申请',
      // 动态组件-按钮
      // 动态组件-查询条件
      formInputs1: [
        {
          compKey: 'compKey1',
          class: 'yuan',
          labelName: '工时费：',
          codeField: 'wiDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          class: 'yuan',
          labelName: '备件费：',
          codeField: 'partDueFee',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey3',
          class: 'yuan',
          labelName: '其他费：',
          codeField: 'sumOtherDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey4',
          class: 'yuan',
          labelName: '费用合计：',
          codeField: 'repairDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey5',
          labelName: '工时折扣：',
          codeField: 'wiDiscountRate',
          validrule: {
            // isformat: /^(\d|[1-9]\d|100)(\.\d{1,2})?$/,
            isformat: /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/,
            resectMessage: {
              isformat: '百分比格式错误!'
            }
          },
          component: () => import('@/components/org/commonInput'),
          isRequire: true,
          type: 'dropdownList',
          class: 'percent',
          isMust: true
        },
        {
          compKey: 'compKey6',
          class: 'yuan',
          labelName: '应收工时：',
          codeField: 'wiRealAmount',
          validrule: {
            isformat: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            resectMessage: {
              isformat: '应收工时只能是数字!'
            }
          },
          component: () => import('@/components/org/commonInput'),
          isRequire: true,
          type: 'dropdownList',

          isMust: true
        },
        {
          compKey: 'compKey7',
          labelName: '备件折扣：',
          validrule: {
            // isformat: /^(\d|[1-9]\d|100)(\.\d{1,2})?$/,
            isformat: /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/,
            resectMessage: {
              isformat: '百分比格式错误!'
            }
          },
          codeField: 'partDiscountRate',
          component: () => import('@/components/org/commonInput'),
          isRequire: true,
          type: 'dropdownList',
          class: 'percent',
          isMust: true
        },
        {
          compKey: 'compKey8',
          class: 'yuan',
          labelName: '应收备件：',
          codeField: 'partRealFee',
          validrule: {
            isformat: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            resectMessage: {
              isformat: '应收备件只能是数字!'
            }
          },
          component: () => import('@/components/org/commonInput'),
          isRequire: true,
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'compKey9',
          class: 'yuan',
          labelName: '折前总额：',
          codeField: 'produceDate',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey10',
          class: 'yuan',
          labelName: '折后总额：',
          codeField: 'repairRealAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey11',
          labelName: '备注：',
          codeField: 'remark',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true,
          span: 12
        }
      ],
      // 动态组件-查询条件
      /*
      *
        claimDemage: 100
        inside: 100
        insurance: 100
      * */
      formInputs2: [
        {
          compKey: 'compKey1',
          class: 'yuan',
          labelName: '索赔：',
          codeField: 'claimDemage',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          class: 'yuan',
          labelName: '内部：',
          codeField: 'inside',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey3',
          class: 'yuan',
          labelName: '保险：',
          codeField: 'insurance',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        }
      ],
      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'vin',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '品牌：',
          codeField: 'carBrandCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车系：',
          codeField: 'carSeriesCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '车型编码：',
          codeField: 'carConfigCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '车型名称：',
          codeField: 'carConfigCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '颜色：',
          codeField: 'carColorName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '车辆用途：',
          codeField: 'buyCaruseName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '行驶里程：',
          codeField: 'mileage',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key9',
          labelName: '购车日期：',
          codeField: 'buyDate',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isMul: false,
          disabled: true
        },
        {
          compKey: 'key10',
          labelName: '交车日期：',
          codeField: 'deliveryDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],

      tableButtonsadd: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          icon: 'iconfont  icon-preservation',
          clickEvent: () => this.save(),
          text: '新增',
          // text: this.$t('sys.button.add') /* 保存*/,
          position: 'right'
        }
      ],

      dynamicTables: [
        {
          // SE0022
          prop: 'payMode',
          label: '账类',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'payMode',
              codeField: 'payMode',
              textField: 'payModeName',
              isAsync: true,
              component: () => import('@/components/org/commonSelect'),
              rowFileds: ' ', // 网格中组件必须传
              lookuptype: 'SE0022',
              isShowLabel: false,
              disabled: true
            }
          ]
        },
        {
          prop: 'brandCode',
          label: '应收单位名称',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'brandCode',
              codeField: 'brandCode',
              component: () => import('./components/rowSpan'),
              rowFileds: 'show:payMode--3' // 是保险则 不显示
            },
            {
              compKey: 'brandCodep',
              codeField: 'brandCode',
              component: () => import('@/components/org/commonInput'),
              rowFileds: 'show:payMode-3', // 是 保险则 显示
              isShowLabel: false
              // isInput: true
            }
          ]
        },
        {
          // SE2004
          prop: 'payment',
          label: '付款方式',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'payment',
              codeField: 'payment',
              textField: 'paymentName',
              isAsync: true,
              component: () => import('@/components/org/commonSelect'),
              lookuptype: 'SE2004',
              isShowLabel: false,
              change: (val, index, row) => {
                const that = this
                if (row.payMode === '3') {
                  if (row.payment !== '11' && row.payment !== '3') {
                    const newList = this.$refs['q1-3'].list
                    newList.forEach((item, index) => {
                      if (item.payMode == '3') {
                        newList[index].payment = ''
                        newList[index].paymentName = ''
                        this.$message({
                          message: '保险付款只能选择转账,挂账',
                          duration: 1000
                        })
                      }
                    })
                    this.$refs['q1-3'].list = newList
                  }
                }
                console.log('val', val)
                console.log('index', index)
                console.log('row', row)
              },
              rowFileds: 'disabled:payMode-1|disabled:payMode-2|disabled:payMode-4|' // 网格中组件必须传
            }
          ]
        },
        {
          prop: 'dueAmount',
          label: '应收费用',
          align: 'center',
          isSlot: true
        },
        {
          prop: 'remark',
          label: '备注',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'remark',
              codeField: 'remark',
              component: () => import('@/components/org/commonInput'),
              rowFileds: ' ', // 网格中组件必须传
              isShowLabel: false,
              isInput: true
            }
          ]
        }
      ],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          bigAreaId: '',
          bigAreaName: '',
          bigAreaCode: '',
          isEnable: '',
          areaRemark: '',
          updateControlId: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),

      activeName: 'first',

      // apiConfig: api.queryExhibitionCarProductionByDetail,

      tableHeader1: [
        {
          prop: 'carSeriesCn',
          label: 'PDI',
          align: 'center'
        },
        {
          prop: 'carConfigCn2',
          label: '免保',
          align: 'center'
        },
        {
          prop: 'carSeriesCn3',
          label: '索赔',
          align: 'center'
        },
        {
          prop: 'carConfigCn4',
          label: '延保',
          align: 'center'
        },
        {
          prop: 'carSeriesCn5',
          label: '外返',
          align: 'center'
        },
        {
          prop: 'carConfigCn6',
          label: '内返',
          align: 'center'
        },
        {
          prop: 'carSeriesCn7',
          label: '保养',
          align: 'center'
        },
        {
          prop: 'carConfigCn8',
          label: '事故',
          align: 'center'
        },
        {
          prop: 'carSeriesCn7',
          label: '机修',
          align: 'center'
        },
        {
          prop: 'carConfigCn8',
          label: '其他',
          align: 'center'
        },
        {
          prop: 'carConfigCn8',
          label: '整单合计',
          align: 'center'
        }
      ],

      tableHeader_1: [
        {
          label: '活动编号',
          prop: ''
        },
        {
          label: '活动名称',
          prop: ''
        },
        {
          label: '活动类型',
          prop: ''
        },
        {
          label: '开始日期',
          prop: ''
        },
        {
          label: '结束日期',
          prop: ''
        }
      ],
      tableHeader_2: [
        {
          label: '订单号',
          prop: ''
        },
        {
          label: '类别',
          prop: ''
        },
        {
          label: '保养套餐/精品编码',
          prop: ''
        },
        {
          label: '保养套餐/精品名称',
          prop: ''
        },
        {
          label: '使用次数/数量',
          prop: ''
        },
        {
          label: '有效日期',
          prop: ''
        },
        {
          label: '购车日期',
          prop: ''
        }
      ],
      // 维修项目
      tableHeader_3_1: [
        {
          label: '工时编码',
          prop: 'wiCode'
        },
        {
          label: '维修内容',
          prop: 'wiName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '工时数',
          prop: 'saleWorkQty'
        },
        {
          label: '工时单价',
          prop: 'wiPrice'
        },
        {
          label: '费用合计',
          prop: 'wiAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '费用预估',
          prop: 'wiPreAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isEntrust'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 维修备件
      tableHeader_3_2: [
        {
          label: '备件编码',
          prop: 'partNo'
        },
        {
          label: '备件名称',
          prop: 'partName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '数量',
          prop: 'partQty'
        },
        {
          label: '单价',
          prop: 'partPrice'
        },
        {
          label: '费用合计',
          prop: 'partAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '维修类别',
          prop: 'retRepairTypeName'
        },
        {
          label: '费用预估',
          prop: 'prePartAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isAssign'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 其他项目
      tableHeader_3_3: [
        {
          label: '其他项目',
          prop: 'otherAmountType'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '费用',
          prop: 'otherAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'servicePackageCode'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      formInputs_4: [
        {
          compKey: 'key0',
          labelName: '索赔：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '内部：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '保险：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '客户：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '工时费：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '备件费：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '其他费用：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '费用合计：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],

      formField2: {},
      defaultList: [
        {
          payMode: '4',
          payModeName: '客户',
          brandCode: '',
          payment: '4',
          paymentName: '现金',
          dueAmount: '0.00',
          remark: ''
        },
        {
          payMode: '4',
          payModeName: '客户',
          brandCode: '',
          payment: '5',
          paymentName: 'APP',
          dueAmount: '0.00',
          remark: ''
        },
        {
          payMode: '4',
          payModeName: '客户',
          brandCode: '',
          payment: '6',
          paymentName: 'POS',
          dueAmount: '0.00',
          remark: ''
        },
        {
          payMode: '4',
          payModeName: '客户',
          brandCode: '',
          payment: '11',
          paymentName: '挂账',
          dueAmount: '0.00',
          remark: ''
        }
      ]
    }
  },

  computed: {
    formFieldNew() {
      return this.$utils.deepCopy(this.formField_one)
    }
  },
  watch: {
    // 主页面传入数据 监听 加载结算单信息
    '$route.params': function(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']
        // 客户费用信息赋值
        for (const [k, v] of Object.entries(val['row'])) {
          this.formField_one[k] = v
        }
        // 将客户名称 绑定到defuatList
        this.defaultList.forEach(item => {
          item.brandCode = this.row.custName
        })
        // 加载请求其它费用以及 结算信息数据
        fetch.loadTable.call(this)
        fetch.getTabData.call(this)
      }
    },

    'formFieldNew': {
      handler(newval, oldval) {
        // 工时折扣
        let wiRate = Number(newval['wiDiscountRate'])
        // 备件折扣
        let partRate = Number(newval['partDiscountRate'])
        // 工时未打折费用
        const wiP = Number(newval['wiDueAmount'])
        // 备件未打折费用
        const partP = Number(newval['partDueFee'])
        // 折后工时费用
        let wiA = Number(newval['wiRealAmount'])
        // 折后备件费用
        let partA = Number(newval['partRealFee'])
        // 其它费
        const otherPrice = Number(newval['sumOtherDueAmount'])
        // 验证
        if (isNaN(wiRate)) {
          // this.$nextTick(() => {
          this.formField_one.wiDiscountRate = '100'
          // })
          return
        } else {
          this.formField_one.wiDiscountRate = this.formField_one.wiDiscountRate
        }
        if (isNaN(partRate)) {
          this.$nextTick(() => {
            this.formField_one.partDiscountRate = '100'
          })
          return
        } else {
          this.formField_one.partDiscountRate = this.formField_one.partDiscountRate
        }
        if (wiRate < 0) {
          this.$nextTick(() => {
            this.formField_one.wiDiscountRate = ''
          })
          return
        }
        if (partRate < 0) {
          this.$nextTick(() => {
            this.formField_one.partDiscountRate = ''
          })
          return
        }
        if (isNaN(wiA)) {
          this.$nextTick(() => {
            this.formField_one.wiRealAmount = ''
          })
          return this.$message('请输入正确工时折后价格!')
        }
        if (isNaN(partA)) {
          this.$nextTick(() => {
            this.formField_one.partRealFee = ''
          })
          return this.$message('请输入正确的备件折后价格!')
        }
        // 初始化 oldval 为 undefined
        if (!oldval) return
        // 工时折扣变化
        if (newval['wiDiscountRate'] !== oldval['wiDiscountRate']) {
          wiA = wiP * wiRate / 100
          this.formField_one.wiRealAmount = wiA.toFixed(2)
        }
        // 工时折后价变化
        if (newval['wiRealAmount'] !== oldval['wiRealAmount']) {
          wiRate = wiA / wiP * 100
          this.formField_one.wiDiscountRate = wiRate.toFixed(2)
        }
        // 备件折扣变化
        if (newval['partDiscountRate'] !== oldval['partDiscountRate']) {
          partA = partP * partRate / 100
          this.formField_one.partRealFee = partA.toFixed(2)
        }
        // 备件折后价变化
        if (newval['partRealFee'] !== oldval['partRealFee']) {
          partRate = partA / partP * 100
          this.formField_one.partDiscountRate = partRate.toFixed(2)
        }
        this.formField_one.repairRealAmount = (wiA + partA + otherPrice).toFixed(2)
        // 折前总额
        this.formField_one.produceDate = (wiP + partP + otherPrice).toFixed(2)
      },
      immediate: true,
      deep: true
    },
    // 监听实收工时
    'formField_one.wiRealAmount': {
      handler(newval, oldval) {
        if (newval === null) {
          this.formField_one.wiRealAmount = '0.00'
        }
      },
      immediate: true
    }
  },
  created() {
    this.formField_custCarInfo = this.getFormField(this.formInputs_1)
  },
  mounted() {
    this.getList(this.$route.params)
  },
  methods: {
    isDisabled(res) {
      var dateDisabled = false
      if (res.payment === '1' || res.payment === '2' || res.payment === '7') {
        dateDisabled = true
      }
      return dateDisabled
    },
    // 价格校验
    priceChange(val, row, col) {
      const priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
      if (!priceReg.test(val)) {
        row.dueAmount = ''
        if (val) return this.$message('请输入正确的价格！')
      }
      if (!val) return
    },
    getList(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']
        // 客户费用信息赋值
        for (const [k, v] of Object.entries(val['row'])) {
          this.formField_one[k] = v
        }
        // 将客户名称 绑定到defuatList
        this.defaultList.forEach(item => {
          item.brandCode = this.row.custName
        })
        // 加载请求其它费用以及 结算信息数据
        fetch.loadTable.call(this)
        fetch.getTabData.call(this)
      }
    },
    // 结算申请
    SettlementApp() {
      const rulesArr = this.$refs['q1-3'].list.filter(item => {
        return item.payMode == '3'
      })
      if (rulesArr[0].payment !== '3' && rulesArr[0].payment !== '11') {
        this.$message({
          message: '保险账类只能选择转账，挂账',
          duration: 1000
        })
        return
      }
      // debugger
      this.$utils.validataMoth(this.$refs['q1-1'], 'validpage')
      if (this.valid) {
        fetch.SettlementApplication.call(this)
      }
    },
    // 设置整个网格数据
    setList(...args) {
      if (!args.length) return
      const ref = args[0]; let rowList; let row; let index
      switch (args.length) {
        // 不传参数清空列表
        case 1:
          rowList = []; break
        // 设置整个网格数据
        case 2:
          rowList = args[1]
          this.$refs[ref].$refs['multipleTable'].list = rowList
          break
        // 设置某一行网格
        case 3:
          index = args[1]; row = args[2]
          this.$refs[ref].$refs['multipleTable'].list[index] = row
          break
      }
    },
    useCustList() {
      this.setList('q1-3', this.defaultList)
    },
    // 生成formField
    genUtil: (array) => (attr1 = 'codeField', attr2 = 'textField') => array.reduce((p, c) => {
      p[c[attr1]] = ''
      // eslint-disable-next-line no-prototype-builtins
      c.hasOwnProperty(attr2) ? p[c[attr2]] = '' : ''
      return p
    }, {}),
    getFormField(tableComponents) {
      return this.genUtil(tableComponents)()
    },
    closeEdit() {
      this.$emit('close')
    },

    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.btns-container {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
  .el-button {
    float: right;
  }
}
.checkbox-wrapper {
  width: 100%;
  padding: 0 10px;
  background-color: #fff;
  .el-checkbox {
    float: right;
    margin-top: 10px;
  }
}
.textarea-header {
  width: 100%;
  height: 30px;
  background-color: #fff;
  &__item {
    width: calc(100% / 3);
    float: left;
  }
}
.mainten-select {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
}
.mainten-table__line {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #fff;
  &-info {
    float: left;
  }
  &-btns {
    float: right;
  }
}
.editBigAreaInfo {
  height: 100%;
  background: #fff;
}
/deep/.el-tabs.el-tabs--top {
  height: 100%;
}
/deep/.percent .el-input.el-input--small.el-input--suffix::after {
  content: '%';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
/deep/.yuan .el-input.el-input--small.el-input--suffix::after {
  content: '元';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
